<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>qooxdoo &raquo; Playground</title>
  <style type="text/css">
    .qx_samples { display:none }
    .vbox {
      /* Solves Firefox bug on playground.*/
      height:100%;
    }

  </style>

  <script type="text/javascript">if (location.hostname === "demo.qooxdoo.org") document.write('<script src="http://resources.qooxdoo.org/script/analytics.js" type="text/javascript"></scr' + 'ipt>');</script>

</head>
<body>

  <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
    <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 50px; height: 15px; text-align: center;">
      <img src="resource/playground/images/loading.gif">
    </div>
  </div>

<!-- ********************************************************************** -->

<textarea class="qx_samples" title="Hello World-mobile">
var page = new qx.ui.mobile.page.NavigationPage();
page.setTitle("Hello World");
page.addListener("initialize", function() {
  var button = new qx.ui.mobile.form.Button("First Button");
  page.getContent().add(button);

  button.addListener("tap", function() {
    alert("Hello World");
  }, this);
},this);

this.getManager().addDetail(page);

page.show();</textarea>


<!-- ********************************************************************** -->


<textarea class="qx_samples" title="List-mobile">
var page = new qx.ui.mobile.page.NavigationPage();
page.setTitle("List");
page.addListener("initialize", function() {
  // List creation
  var list = new qx.ui.mobile.list.List({
    configureItem : function(item, data, row) {
      item.setImage("qx/icon/Tango/22/apps/internet-mail.png");
      item.setTitle(row<4 ? ("Selectable " + data.title) : data.title);
      item.setSubtitle(data.subTitle);
      item.setSelectable(row<4);
      item.setShowArrow(row<4);
    }
  });

  // Create the data
  var data = [];
  for (var i=0; i < 50; i++) {
    data.push({title:"Item" + i, subTitle:"Subtitle for Item #" + i});
  }

  list.setModel(new qx.data.Array(data));
  list.addListener("changeSelection", function(evt) {
    alert("Item Selected #" + evt.getData());
  }, this);

  page.getContent().add(list);
},this);

this.getManager().addDetail(page);

page.show();</textarea>


<!-- ********************************************************************** -->


<textarea class="qx_samples" title="Pages-mobile">// Page 1
var page1 = new qx.ui.mobile.page.NavigationPage();
page1.setTitle("Page 1");
page1.addListener("initialize", function() {
  var button = new qx.ui.mobile.form.Button("Next Page");
  page1.getContent().add(button);

  button.addListener("tap", function() {
    page2.show();
  }, this);
},this);

// Page 2
var page2 = new qx.ui.mobile.page.NavigationPage();
page2.set({
  title : "Page 2",
  showBackButton : true,
  backButtonText : "Back"
});
page2.addListener("initialize", function() {
  var label = new qx.ui.mobile.basic.Label("Content of Page 2");
  page2.getContent().add(label);
},this);

page2.addListener("back", function() {
  page1.show({reverse:true});
}, this);

this.getManager().addDetail([page1,page2]);

page1.show();</textarea>



<!-- ********************************************************************** -->


<textarea class="qx_samples" title="Form-mobile">
var page = new qx.ui.mobile.page.NavigationPage();
page.setTitle("Login");
page.addListener("initialize", function() {
  var form = new qx.ui.mobile.form.Form();

  // User name
  var user = new qx.ui.mobile.form.TextField();
  user.setRequired(true);
  form.add(user, "Username");

  // Password
  var pwd = new qx.ui.mobile.form.PasswordField();
  pwd.setRequired(true);
  form.add(pwd, "Password");

  // Use form renderer
  page.getContent().add(new qx.ui.mobile.form.renderer.Single(form));

  // login button
  var button = new qx.ui.mobile.form.Button("Login");
  page.getContent().add(button);

  button.addListener("tap", function() {
    if (form.validate()) {  // use form validation
      alert("Loggin in " + user.getValue());
    }
  }, this);
},this);

this.getManager().addDetail(page);

page.show();</textarea>


<!-- ********************************************************************** -->


<textarea class="qx_samples" title="YQL Binding-mobile">
// Data model
var query = "select * from feed where url='http://feeds.feedburner.com/qooxdoo/news/content'";

var delegate = {manipulateData : function(data) {
  return data.query.results.item;
}};
var store = new qx.data.store.Yql(query, delegate);

// View
var page = new qx.ui.mobile.page.NavigationPage();
page.setTitle("qooxdoo news");
page.addListener("initialize", function()
{
  var list = new qx.ui.mobile.list.List({
    configureItem : function(item, data, row)
    {
      item.setTitle(data.getTitle());
      item.setSubtitle(data.getPubDate());
    }
  });

  store.bind("model", list, "model");
  page.getContent().add(list);
},this);

this.getManager().addDetail(page);
page.show();</textarea>


<!-- ********************************************************************** -->


<textarea class="qx_samples" title="Hello World-ria">// Create a button
var button1 = new qx.ui.form.Button("First Button", "icon/22/apps/internet-web-browser.png");

// Document is the application root
var doc = this.getRoot();

// Add button to document at fixed coordinates
doc.add(button1,
{
  left : 100,
  top  : 50
});

// Add an event listener
button1.addListener("execute", function(e) {
  alert("Hello World!");
});</textarea>

<!-- ********************************************************************** -->

<div id="compare_div1" style="visibility: hidden;"></div>
<div id="compare_div2" style="visibility: hidden;"></div>

<textarea class="qx_samples" title="Window-ria">var win = new qx.ui.window.Window("First Window");
win.setWidth(300);
win.setHeight(200);
win.setShowMinimize(false);

this.getRoot().add(win, {left:20, top:20});
win.open();</textarea>


<!-- ********************************************************************** -->

<textarea class="qx_samples" title="Dialog-ria">var layout = new qx.ui.layout.Grid(9, 5);
layout.setColumnAlign(0, "right", "top");
layout.setColumnAlign(2, "right", "top");
layout.setColumnWidth(1, 160);
layout.setColumnWidth(2, 72);
layout.setColumnWidth(3, 108);


var container = new qx.ui.tabview.TabView();
var page = new qx.ui.tabview.Page("Page");
page.setLayout(layout);
page.setPadding(10);
container.add(page);

this.getRoot().add(container, {left:40, top:40});

labels = ["First Name", "Last Name", "City", "Country", "Notes"];
for (var i=0; i < labels.length; i++) {
  page.add(new qx.ui.basic.Label(labels[i]).set({
    allowShrinkX: false,
    paddingTop: 3
  }), {row: i, column : 0});
}

inputs = ["John", "Smith", "New York", "USA"];
for (var i=0; i < inputs.length; i++) {
  page.add(new qx.ui.form.TextField(inputs[i]), {row:i, column:1});
}


// text area
page.add(new qx.ui.form.TextArea().set({
  height: 250
}), {row:4, column:1, colSpan: 3});


// radio buttons
page.add(new qx.ui.basic.Label("Sex").set({
  allowShrinkX: false,
  paddingTop: 3
}), {row:0, column:2});

var female = new qx.ui.form.RadioButton("female");
var male = new qx.ui.form.RadioButton("male");

var mgr = new qx.ui.form.RadioGroup();
mgr.add(female, male);

page.add(female, {row:0, column:3});
page.add(male, {row:1, column:3});
male.setValue(true);


// check boxes
page.add(new qx.ui.basic.Label("Hobbies").set({
  allowShrinkX: false,
  paddingTop: 3
}), {row:2, column:2});
page.add(new qx.ui.form.CheckBox("Reading"), {row:2, column:3});
page.add(new qx.ui.form.CheckBox("Swimming").set({
  enabled: false
}), {row:3, column:3});


// buttons
var paneLayout = new qx.ui.layout.HBox().set({
  spacing: 4,
  alignX : "right"
});
var buttonPane = new qx.ui.container.Composite(paneLayout).set({
  paddingTop: 11
});
page.add(buttonPane, {row:5, column: 0, colSpan: 4});

okButton = new qx.ui.form.Button("OK", "icon/22/actions/dialog-apply.png");
okButton.addState("default");
buttonPane.add(okButton);

cancelButton = new qx.ui.form.Button("Cancel", "icon/22/actions/dialog-cancel.png");
buttonPane.add(cancelButton);</textarea>

<!-- ********************************************************************** -->

<textarea class="qx_samples" title="Calculator-ria">var win = new qx.ui.window.Window("Calculator");
win.setLayout(new qx.ui.layout.VBox(3));
win.setShowMinimize(false);
this.getRoot().add(win, {left:100, top:50}); 
win.open();

var display = new qx.ui.basic.Label("0").set({
  allowGrowX: true,
  allowGrowY: true,
  textAlign : "right",
  font: "bold",
  decorator: "main"
});
win.add(display, {flex:1});

var buttonContainer = new qx.ui.container.Composite();
var grid = new qx.ui.layout.Grid(3, 3);
buttonContainer.setLayout(grid);
win.add(buttonContainer, {flex:6});

var labels = [
  ["MC", "M+", "M-", "MR"],
  ["C", "&plusmn;", "&divide;", "*"],
  ["7", "8", "9", "-"],
  ["4", "5", "6", "+"],
  ["1", "2", "3", "="],
  ["0", null, ".", null]
]; 

var buttons = {};
for (var row=0; row<6; row++) {
  grid.setRowFlex(row, 1);
  for (var column=0; column<4; column++) {
    grid.setColumnFlex(column, 1);
    var label = labels[row][column];
    if (label) {
      var button = new qx.ui.form.Button(label).set({
        rich: true,
        allowShrinkX: false
      });
      buttonContainer.add(button, {row: row, column: column});
      buttons[label] = button;
    }
  }
} 

buttons["="].setLayoutProperties({rowSpan: 2});
buttons["0"].setLayoutProperties({colSpan: 2}); 

for (label in buttons) {
  buttons[label].addListener("execute", function(e) {
    var button = e.getTarget();
    alert("Pressed: " + button.getLabel());
  }, this);
}
win.addListener("keypress", function(e) {
  alert("Key: " + e.getKeyIdentifier());
}, this);</textarea>


<!-- ********************************************************************** -->

<textarea class="qx_samples" title="Table-ria">function createRandomRows(rowCount) {
  var rowData = [];
  var now = new Date().getTime();
  var dateRange = 400 * 24 * 60 * 60 * 1000; // 400 days
  var nextId = 0;
  for (var row = 0; row < rowCount; row++) {
    var date = new Date(now + Math.random() * dateRange - dateRange / 2);
    rowData.push([ nextId++, Math.random() * 10000, date, (Math.random() > 0.5) ]);
  }
  return rowData;
}


// window
var win = new qx.ui.window.Window("Table").set({
  layout : new qx.ui.layout.Grow(),
  allowClose: false,
  allowMinimize: false,
  contentPadding: 0
});
this.getRoot().add(win);
win.moveTo(30, 40);
win.open();

// table model
var tableModel = new qx.ui.table.model.Simple();
tableModel.setColumns([ "ID", "A number", "A date", "Boolean" ]);
tableModel.setData(createRandomRows(1000));

// make second column editable
tableModel.setColumnEditable(1, true);

// table
var table = new qx.ui.table.Table(tableModel).set({
  decorator: null
});
win.add(table);

var tcm = table.getTableColumnModel();

// Display a checkbox in column 3
tcm.setDataCellRenderer(3, new qx.ui.table.cellrenderer.Boolean());

// use a different header renderer
tcm.setHeaderCellRenderer(2, new qx.ui.table.headerrenderer.Icon("icon/16/apps/office-calendar.png", "A date"));</textarea>

<!-- ********************************************************************** -->

<textarea class="qx_samples" title="Tree-ria">// create the tree
var tree = new qx.ui.tree.Tree();
tree.set({
  width: 150,
  height: 300
});
this.getRoot().add(tree, {left: 10, top: 10});


// create and set the tree root
var root = new qx.ui.tree.TreeFolder("Desktop");
tree.setRoot(root);

// create some subitems
var f1 = new qx.ui.tree.TreeFolder("Logos");
var f2 = new qx.ui.tree.TreeFolder("TODO");
var f3 = new qx.ui.tree.TreeFile("jsmag_js9.pdf");
f3.setIcon("icon/22/mimetypes/text-html.png");
root.add(f1, f2, f3);

// create a third layer
var f11 = new qx.ui.tree.TreeFile("Logo1.png");
f11.setIcon("icon/22/mimetypes/media-image.png");
var f12 = new qx.ui.tree.TreeFile("Logo2.png");
f12.setIcon("icon/22/mimetypes/media-image.png");
var f13 = new qx.ui.tree.TreeFile("Logo3.png");
f13.setIcon("icon/22/mimetypes/media-image.png");
f1.add(f11, f12, f13);

// open the folders
root.setOpen(true);
f1.setOpen(true);</textarea>

<!-- ********************************************************************** -->

<textarea class="qx_samples" title="Data Binding-ria">/**
 * Bind a textfield to a label
 */
var textfield = new qx.ui.form.TextField("Change me...");
textfield.setLiveUpdate(true);
this.getRoot().add(textfield, {left: 10, top: 10});
var label = new qx.ui.basic.Label("Change me...");
this.getRoot().add(label, {left: 120, top: 12});
// bind the textfield to the label
textfield.bind("changeValue", label, "value");

/**
 * Bind two slider together
 */
var slider1 = new qx.ui.form.Slider("horizontal");
slider1.setWidth(300);
this.getRoot().add(slider1, {left: 10, top: 50});
var slider2 = new qx.ui.form.Slider("horizontal");
slider2.setWidth(200);
this.getRoot().add(slider2, {left: 10, top: 80});
// set up the bidirectional single value binding
slider1.bind("value", slider2, "value");
slider2.bind("value", slider1, "value");</textarea>


<!-- ********************************************************************** -->

<textarea class="qx_samples" title="YQL Binding-ria">// Data model
var query = "select * from feed where url='http://feeds.feedburner.com/qooxdoo/news/content'";

var delegate = {manipulateData : function(data) {
  return data.query.results.item;
}};

var store = new qx.data.store.Yql(query, delegate);

// View
var list = new qx.ui.form.List();
this.getRoot().add(list, {left: 0, right: 0});

var controller = new qx.data.controller.List(null, list, "title");

store.bind("model", controller, "model");</textarea>


  <script type="text/javascript" src="script/playground.js"></script>

</body>
</html>
